<template>
  <div style="background-color: white">
    <div class="probox">
      <div style="display: flex; width: 350px; justify-content: space-between">
        <el-select v-model="type" placeholder="请选择分类方式">
          <el-option label="按照名称搜索" value="productName"></el-option>
          <el-option label="按照描述搜索" value="productDesc"></el-option>
        </el-select>
        <el-input
          v-model="input"
          style="width: 100px"
          placeholder="关键字"
        ></el-input>

        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
      </div>

      <div>
        <router-link to="/index/addproduct"
          ><el-button type="primary" @click="getCategory">+ 添加商品</el-button></router-link
        >
      </div>
    </div>
    <el-divider></el-divider>

    <div style="padding: 20px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="desc" label="商品描述" width="260">
        </el-table-column>
        <el-table-column prop="phone" label="商品规格" width="150">
        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="100">
        </el-table-column>
        <el-table-column prop="status" label="商品状态" width="150">
          <el-row slot-scope="scope">
            <el-button
              size="mini"
              round
              @click="updateStatu(scope.row.status, scope.row._id)"
              >{{ scope.row.status == 1 ? "上架" : "下架" }}</el-button
            >
          </el-row>
        </el-table-column>
        <el-table-column label="操作选项">
          <el-row slot-scope="scope">
            <router-link to="/index/productdetail"
              ><el-button
                size="mini"
                round
                @click="getProductInfo(scope.row._id)"
                >详情</el-button
              ></router-link
            >
            <router-link to="/index/updateproduct"
              ><el-button size="mini" round @click="updataProduct(scope.row)"
                >修改</el-button
              ></router-link
            >
          </el-row>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px; text-align: center">
      <!-- total表示总条目数，size用于设置每页显示的页码数量  :page-size='' @current-change='' :current-page='' -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        @current-change="changePage"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions([
      "psearchs",
      "getProducts",
      "updateStatus",
      "getProductInfos",
      "getCategorys",
      "getCategoryinfo",
    ]),
    search() {
      console.log(this.input, this.type);
      var productName = this.input;
      var productDesc = this.type;
      var pageSize = 3;
      var pageNum = 1;
      this.psearchs({ pageNum, pageSize, productName, productDesc });
    },
    getProductInfo(productId) {
      this.getProductInfos(productId);
    },
    //上下架
    updateStatu(status, productId) {
      var pageSize = 3;
      var pageNum = 1;
      this.updateStatus({status:!status, productId });
      this.getProducts({pageSize,pageNum});
    },
    
    changePage(pageNum) {
      console.log(pageNum, this.pageSize);

      var pageSize = this.pageSize;
      this.getProducts({ pageNum, pageSize });
    },
    getCategory() {
      console.log("dasdhnais");
      var parentId = 0;
      this.getCategorys({ parentId });
    },
    updataProduct(data) {
      var productId = data._id;
      localStorage.setItem("productId",productId)
    },
  },
  data() {
    return {
      input: "",
      type: "",
    };
  },
  computed: {
    tableData() {
      return this.$store.state.products.products.list;
    },
    total() {
      return this.$store.state.products.products.total;
    },
    pageNum() {
      return Number(this.$store.state.products.products.pageNum);
    },
    pageSize() {
      return Number(this.$store.state.products.products.pageSize);
    },
  },
};
</script>